<template name="components">
	<view class="bg-white main-body">
		<cu-custom :isBack="true" backRouterName="index2">
			<block slot="backText">返回</block>
			<block slot="content">{{bartitle}}</block>
		</cu-custom>
		<!-- 选择年月 -->
		<view class="cu-bar search fixed bg-white" style="52px" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round" @click="showSex = true;" style="padding-right: 10px;">
				<input type="text" v-model="model1.userInfo.sex" style="padding-left:10px;flex: 1;width: 90%;"
					placeholder="选择时间" disabled></input>

				<u-icon color="#00a38a" name="arrow-down"></u-icon>
			</view>
			<view class="search-form round" style="flex:2">
				<text class="cuIcon-search" style="color:#00a38a"></text>
				<input type="text" style="width: 90%;" placeholder="输入污染名称的关键词" v-model="model1.userInfo.name"
					@change="changeKey" confirm-type="search"></input>
			</view>
			<!-- <view class="action" >
				<button class="cu-btn bg-gradual-green shadow-blur round">搜索</button>
			</view> -->
		</view>


		<scroll-view scroll-y class="page" style="position: absolute;"
			:style="[{top:'calc('+ CustomBar + 'px + 50px)',height:'calc(100vh - '+ CustomBar + 'px - 60px)'}]">
			<u-picker :show="showSex" ref="uPicker3" @cancel="cancel(0)" keyName="name" @confirm="confirm"
				:columns="actions" @change="sexSelect"></u-picker>


			<view class="cu-card">
				<view v-show="hasData" class="cu-item bg-img shadow-blur good-li" v-for="good in goods" :key="good.id">
					<view style="background: #fff;">


						<u-swipe-action>
							<u-swipe-action-item :options="options1" @click="click(good.id,good)"
								:disabled="good.status == 2">
								<view class="swipe-action">
									<view class="swipe-action__content">

										<view class="item_data" @click="goDetail(good)">
											<view class="item_1">
												<text class="good-name">{{good.createUser }}</text>
												<text class="good-price"
													v-if="good.updateTime">{{good.updateTime.substring(0,good.updateTime.length-3)}}</text>
											</view>
											<view
												style="line-height: 25px;position: relative;width: 100%;display: flex;">
												<text class="good-title">污染名称：</text>
												<text class="good-text"
													v-if="good.pollutionSourceName">{{good.pollutionSourceName}}</text>

											</view>
											<view
												style="line-height: 25px;position: relative;width: 100%;display: flex;">
												<text class="good-title">检查地点：</text>
												<text class="good-text" v-if="good.address">{{good.address}}</text>
											</view>
											<!-- <view style="line-height: 25px;">
												<text class="good-title">检查情况：</text>
												<text class="good-text" v-if="good.checkedSituation">{{good.checkedSituation}}</text>
											</view>
											<view style="line-height: 25px;">
												<text class="good-title">存在问题：</text>
												<text class="good-desc" v-if="good.question">{{good.question}}</text>
											</view> -->

											<view style="line-height: 25px;position: relative;">

												<view class="btn-box1 weizhi" v-if="good.status==1">
													未上报
												</view>
												<view class="btn-box2 weizhi" v-if="good.status==2">
													已上报
												</view>
											</view>

										</view>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
				</view>
				<view v-show="!hasData" class="noData">
					<image src="../../static/img/nodata.png"></image>
					<view class="title">暂无数据</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
		<!-- 导出 -->
		<view v-show="hasData&&isAll=='true'" class="cu-bar export fixed fixed2 bg-white"
			style="bottom:0px;padding: 8px 15px;">
			<button @tap="exportExcel" class="btnbox cu-btn" :disabled="exportloading" style="background: #1cbbb4;" plain="true">记录导出</button>			
			<!-- <button @tap="exportExcel" class="btnbox cu-btn" :loading="exportloading" :disabled="exportloading" style="background: #1cbbb4;" plain="true">记录导出</button>
 -->
		</view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import configService from '@/common/service/config.service.js';
	import {
		ACCESS_TOKEN
	} from '@/common/util/constants.js'
	import {
		mapActions
	} from "vuex"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	let apiUrl = configService.apiUrl;
	export default {
		mixins: [MescrollMixin],
		name: "components",
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				bartitle: '巡查记录',
				list: [{
						title: '索引列表',
						img: 'https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg',
						url: '../plugin/indexes'
					},
					{
						title: '微动画',
						img: 'https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg',
						url: '../plugin/animation'
					},
					{
						title: '全屏抽屉',
						img: 'https://image.weilanwl.com/color2.0/plugin/qpct2148.jpg',
						url: '../plugin/drawer'
					},
					{
						title: '垂直导航',
						img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
						url: '../plugin/verticalnav'
					},
					{
						title: '垂直导航',
						img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
						url: '../plugin/verticalnav'
					},
					{
						title: '垂直导航',
						img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
						url: '../plugin/verticalnav'
					},
					{
						title: '垂直导航',
						img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
						url: '../plugin/verticalnav'
					},
					{
						title: '垂直导航',
						img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
						url: '../plugin/verticalnav'
					},
					{
						title: '垂直导航',
						img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
						url: '../plugin/verticalnav'
					},
					{
						title: '垂直导航',
						img: 'https://image.weilanwl.com/color2.0/plugin/qpczdh2307.jpg',
						url: '../plugin/verticalnav'
					}
				],
				//接口url
				dataUrl: '/pollution/dataList',
				removeUrl: '/pollution/remove',
				showSex: false,
				show1: true,
				hasData: true,
				exportloading: false,
				rules: {},
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				model1: {
					userInfo: {
						sex: '今日',
						name: ''
					},
				},
				actions: [
					[{
							id: 1,
							name: '今日'
						},
						{
							id: 2,
							name: '当月'
						},
						{
							id: 3,
							name: '当年'
						},
						{
							id: 4,
							name: '累计'
						},

					]
				],
				baseUrl: getApp().globalData.baseUrl,
				goods: [


				],
				setNav: {
					'bg': 'yellow', //背景色
					'color': 'red', //字体颜色
					'isdisPlayNavTitle': true, //是否显示返回按钮，由于导航栏是共用的，把所有的东西封装好，
					'isdisPlayNavLeftButton': true,
					// 然后有些页面不需要的东西通过条件控制进行显示与隐藏
					'navTitle': '商品列表' //导航标题
				}, // 数据列表
				time: '1',
				userIdentity: '',
				queryType: '',
				checkTime: '',
				isAll: false,
			};
		},
		onShow(option) {
			if (this.mescroll) {
				this.mescroll.resetUpScroll()
			}
			console.log("onShow调用了");
			console.log(this.$store.getters.userIdentity)
			console.log(this.CustomBar)
			console.log(this.StatusBar)

			this.userIdentity = this.$store.getters.userIdentity
			console.log(option)


			// if (option.checkTime) {
			// 	this.time = option.checkTime == 4 ? '' : option.checkTime
			// 	if (this.time == '') {
			// 		this.model1.userInfo.sex = '累计'
			// 		this.bartitle = '巡查记录';
			// 		// uni.setNavigationBarTitle({
			// 		// 	title: '专项巡查'
			// 		// });
			// 	}
			// 	if (this.time == 1) {

			// 		// this.bartitle = '当日巡查';
			// 		// uni.setNavigationBarTitle({
			// 		// 	title: '专项巡查'
			// 		// });
			// 	}
			// }
			// if (option.status) {
			// 	this.status = option.status
			// }
			this.getSelect();
		},

		onLoad(option) {
			console.log(this.$store.getters.userIdentity)
			console.log(this.CustomBar)
			console.log(this.StatusBar)

			this.userIdentity = this.$store.getters.userIdentity
			uni.showLoading({
				title: '加载中...',
				// mask: true
			});
			console.log(option)


			if (option.checkTime) {
				this.time = option.checkTime == 4 ? '' : option.checkTime
				this.checkTime = option.checkTime;
				if (this.time == '') {
					this.model1.userInfo.sex = '累计'
									
					// uni.setNavigationBarTitle({
					// 	title: '专项巡查'
					// });
				}
				if (this.time == 1) {

					// this.bartitle = '当日巡查';
					// uni.setNavigationBarTitle({
					// 	title: '专项巡查'
					// });
				}
			}
			if (option.status) {
				this.status = option.status
			}
			if (option.queryType) {
				this.queryType = option.queryType
			}
			if (option.isAll != '') {
				this.isAll = option.isAll
				if(option.isAll == 'true'){
					this.bartitle = '累计巡查';
				}
			}

			console.log(this.hasData, this.checkTime, this.status, this.isAll)

			this.getSelect();
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		methods: {
			upCallback(page) {
				this.getSelect();
			},
			click(index, row) {
				console.log('click', index);
				if (row.status == 2) {
					this.$tip.success('已上报无法删除!')
					return
				}
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除吗？',
					success: res => {
						console.log(res)
						if (res.confirm) {
							this.remove(index)
							this.show1 = false
						}
					}
				})
			},
			getSelect() {
				uni.showLoading({
					title: '加载中...',
				});
				let params = {
					pageNum: 1,
					pageSize: 1000,
					checkTime: this.time,
					status: this.status,
					queryType: this.queryType,
					keyWords: this.model1.userInfo.name
				};
				this.$http.get(this.dataUrl, {
					params: params
				}).then(res => {
					uni.hideLoading()
					console.log(res)
					// uni.hideLoading()
					if (res.data.code == 200) {
						console.log(res.data.result)

						this.goods = res.data.result;
						if (this.goods.length == 0) {
							this.hasData = false
						}else if(this.goods.length > 0){
							this.hasData = true
						}

					}

				}).catch((error) => {
					console.log(error)
					//  uni.showToast({
					// icon: 'none',
					// title: `${error}`
					// });
				});

			},
			// 导出附件 uni方法
			openFile(index) {
				wx.showLoading({
					title: "加载中",
					mask:true
				});

				let token = uni.getStorageSync(ACCESS_TOKEN)
				uni.downloadFile({
					url: apiUrl + '/pollution/exportExcel?checkTime=' + this.time,
					header: {
						'X-Access-Token': token
					},
					success: function(res) {
						wx.hideLoading();
						var filePath = res.tempFilePath;
						//文件保存到本地
						uni.saveFile({
							tempFilePath: res.tempFilePath, //临时路径
							success: function(res) {
								var obj = res
								uni.showModal({
									title: '提示',
									content: '下载成功，是否打开？',
									success: res => {
										console.log(res)
										if (res.confirm) {
											//打开文档查看
											uni.openDocument({
												filePath: obj.savedFilePath,
												success: function(res) {
													 console.log('打开文档成功');
												}
											});

										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})

								// uni.showToast({
								// 	icon: 'none',
								// 	mask: true,
								// 	title: '文件已保存：' + res.savedFilePath, //保存路径
								// 	duration: 3000,
								// });
								// setTimeout(() => {
								// 	//打开文档查看
								// 	uni.openDocument({
								// 		filePath: res.savedFilePath,
								// 		success: function(res) {
								// 			// console.log('打开文档成功');
								// 		}
								// 	});
								// }, 3000)
							}
						});
						// uni.openDocument({
						//  filePath: filePath,
						// 	showMenu: true,
						// 	success: function(res) {
						// 		console.log('打开文档成功');
						// 	}
						// });
					}
				});
			},
			async download() {
				let url = "http://xapta.xa.gov.cn/resource/download.jspx?id=2858";
				let {
					data
				} = await this.$http.get(url).then(res => {
					if (res.data.code == 200) {}
				}).catch((error) => {
					console.log(error)
				});
				console.log(data)

			},
			// 导出附件 wx方法
			exportExcel() {
				// const fs = wx.getFileSystemManager()
				// let filePath = `${wx.env.USER_DATA_PATH}/${this.time}111.doc`;
				// 	uni.request({
				// 		 url: 'http://xapta.xa.gov.cn/resource/download.jspx?id=2858',
				//          // header:{'X-Access-Token':token},
				// // 		data:prams,
				//  		method:'GET',
				// 		timeout:600000000,
				// 		responseType:'ArrayBuffer',
				// 		success:(data) => {
				// 			console.log(data)
				// 			fs.writeFile({
				// 			  filePath: filePath,
				// 			  data: data.data,
				// 			  encoding: 'utf8',
				// 			  success(res) {
				// 			    console.log(res)
				// 				wx.showModal({
				// 				  title: "下载成功",
				// 				  content: "是否打开?",
				// 				  confirmColor: "#0bc183",
				// 				  confirmText: "打开",
				// 				  success(res) {
				// 				    if (res.confirm) {
				// 				      wx.openDocument({//打开文件
				// 				        filePath,//文件名
				// 				        showMenu: true,//右上角是否显示(...)
				// 				        success(res) {
				// 				          console.log(res);
				// 				        },
				// 				      });
				// 				    } else if (res.cancel) {

				// 					}
				// 				  }
				// 				});
				// 			  },
				// 			  fail(res) {
				// 			    console.error(res)
				// 			  }
				// 			})

				// 			}
				// 		})
				this.exportloading = true;
				const currentDate = this.getDate({
					format: true
				})
				console.log(currentDate)
				wx.showLoading({
					title: "导出中",
					mask:true
				});
				let token = uni.getStorageSync(ACCESS_TOKEN)
				const fs = wx.getFileSystemManager()
				let filePath = `${wx.env.USER_DATA_PATH}/渭南市临渭区VOCs巡查记录-${currentDate}.xls`;
				uni.request({
					url: apiUrl + '/pollution/exportExcel?checkTime=' + this.time,
					header: {
						'X-Access-Token': token
					},
					// 		data:prams,
					method: 'GET',
					timeout: 600000000,
					responseType: 'ArrayBuffer',
					success: (data) => {
						console.log(data)
						console.log(filePath)
						
						fs.writeFile({
							filePath: filePath,
							data: data.data,
							encoding: 'utf8',
							success:(res)=> {
								console.log(res)
								this.exportloading = false;
								wx.hideLoading();
								wx.showModal({
									title: "导出成功",
									content: "是否打开?",
									confirmColor: "#0bc183",
									confirmText: "打开",
									success(res) {
										if (res.confirm) {
											wx.openDocument({ //打开文件
												filePath, //文件名
												showMenu: true, //右上角是否显示(...)
												success(res) {
													console.log(res);
												},
											});
										} else if (res.cancel) {

										}
									}
								});
							},
							fail(err) {
								console.log(err)
								this.exportloading = false;
											  wx.hideLoading();
											  this.$tip.error('文件导出失败!')
								// 			  wx.showModal({
								// 			    title: '提示',
								// 			    content: "文件下载失败",
								// 			    showCancel: false, //是否显示取消按钮
								// 			    success: function (result) {
								
								// 				}
								// 			  })
							}
						})

					}
				})
				// let token =  uni.getStorageSync(ACCESS_TOKEN)
				// wx.showLoading({ title: "加载中" });
				// 	let filePath = `${wx.env.USER_DATA_PATH}/${this.time}111.xls`;//导出的文件名
				// 	uni.request({
				// 		 url: apiUrl+'/pollution/exportExcel?checkTime='+this.time,
				//          header:{'X-Access-Token':token},
				// // 		data:prams,
				//  		method:'GET',
				// 		timeout:600000000,
				// 		responseType:'ArrayBuffer',
				// 		success:(data) => {
				// 			console.log(data)
				// 		let fm = wx.getFileSystemManager();//获取文件管理器
				// 		fm.writeFile({//写入文件
				// 			filePath,//文件名
				// 			data,//数据
				// 			success: res =>{
				// 				wx.hideLoading();
				// 				wx.showModal({
				// 				  title: "下载成功",
				// 				  content: "是否打开?",
				// 				  confirmColor: "#0bc183",
				// 				  confirmText: "打开",
				// 				  success(res) {
				// 				    if (res.confirm) {
				// 				      wx.openDocument({//打开文件
				// 				        filePath,//文件名
				// 				        showMenu: true,//右上角是否显示(...)
				// 				        success(res) {
				// 				          console.log(res);
				// 				        },
				// 				      });
				// 				    } else if (res.cancel) {

				// 					}
				// 				  }
				// 				});
				// 			},
				// 			fail: err => {
				// 				console.log(err)
				// 			  wx.hideLoading();
				// 			  wx.showModal({
				// 			    title: '提示',
				// 			    content: "文件下载失败",
				// 			    showCancel: false, //是否显示取消按钮
				// 			    success: function (result) {

				// 				}
				// 			  })
				// 			}
				// 		});
				// 	}
				// 	})
			},
			remove(id) {
				let params = {
					id: id,
				};
				this.$http.post(this.removeUrl + '?id=' + id, params).then(res => {
					console.log(res)
					// uni.hideLoading()
					if (res.data.code == 200) {
						console.log(res.data.result)
						// this.$tip.success('删除成功!')
						// this.$tip.toast('删除成功!')
						this.getSelect();

					}

				}).catch((error) => {
					console.log(error)
					//  uni.showToast({
					// icon: 'none',
					// title: `${error}`
					// });
				});
			},
			goDetail(row) {
				if (this.exportloading == true) {
					return
				}
				console.log(row)
				// uni.navigateTo({
				// 	url: '/pages/pollution/detail?type=' + row.status + '&id=' + row.id
				// })
				uni.navigateTo({
					url: '/pages/pollution/newDetail?type=' + row.status + '&id=' + row.id
				})
			},
			goDetail2(row) {
				console.log(row)
				uni.navigateTo({
					url: "/pages/pollution/detail?type=1&id=" + row.id
				})
				// this.$Router.push({
				// 	name: 'pollutiondetail'
				// })
			},
			//u-picker确定
			confirm(e) {
				this.showSex = false;
				this.model1.userInfo.sex = e.value[0].name;
				if (this.model1.userInfo.sex == '今日') {
					this.time = 1
				} else if (this.model1.userInfo.sex == '当月') {
					this.time = 2
				} else if (this.model1.userInfo.sex == '当年') {
					this.time = 3
				} else {
					this.time = 4
				}
				this.getSelect();

			},
			changeKey() {
				this.getSelect();
			},
			getImgUrl(icon) {
				console.log("getApp().globalData.host:" + getApp().globalData.host);
				return getApp().globalData.host + icon;
			},
			//日期格式化
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log("调用2:" + page.num);
				console.log("this.baseUrl:" + this.baseUrl);
				uni.request({
					url: this.baseUrl + '/app/secondHand/list', //仅为示例，并非真实接口地址。
					contentType: "application/json;charset=utf-8",
					data: JSON.stringify({
						'page': page.num,
						'rows': 8
					}),
					dataType: "json",
					method: "POST",
					header: {
						'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						//this.goods=res.data.data;
						this.mescroll.endSuccess(res.data.data.length);
						//this.mescroll.endByPage(this.goods.length,100); //必传参数(当前页的数据个数, 总页数)
						//设置列表数据
						//if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
						this.goods = this.goods.concat(res.data.data); //追加新数据
					},
					fail: () => {
						this.mescroll.endErr();
						console.log("失败");
					}
				});

			}
		}
	}
</script>

<style>
	/* 	.page {
		height: 100vh;
	} */

	.main-body {
		width: 100vw;
		height: 100vh;
		position: relative;
		background-size: 100% 100%;
		// background: url() no-repeat;
		// background-size: 100% 100%;
	}

	.noData {
		width: 750upx;
		margin-top: 20%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;




	}

	.noData image {
		width: 220upx;
		height: 220upx;
	}

	.bg-green {
		background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
		color: #ffffff;
	}

	/deep/ .cu-custom {
		background-image: linear-gradient(45deg, #1cbbb4, #1cbbb4);
		color: #ffffff;
		/* position: fixed; */
		width: 100%;
		z-index: 1024;
	}

	.good-list {
		width: 100vw;
		margin-top: 34.29upx;

	}

	/deep/ .u-swipe-action-item__right {
		margin-top: 10px;
		top: 0px;
		bottom: 0px;
		right: 1px;
		margin-bottom: 10px;
		margin-right: 5px;
		position: absolute;
	}

	.good-img {
		width: 160upx;
		height: 160upx;
		margin-right: 20rpx;
	}

	.good-name {
		font-size: 32.86upx;
		font-weight: bold;
		line-height: 50upx;
		letter-spacing: 0px;
		color: #313131;
		height: 50upx;
		overflow: hidden;
	}

	.good-title {
		font-size: 28.57upx;
		/* 	line-height: 30upx; */
		color: #666666;
		display: flex;
		width: 78px;
		white-space: nowrap;
		overflow: visible;
		/* text-align: right; */
		/* display: inline-block;
		    float: left; */
	}

	.export {}

	.cu-bar.fixed2,
	.nav.fixed2 {

		top: inherit !important;
	}

	.indexes {
		position: relative;
	}

	.btn-box1 {
		width: 112.86upx;
		height: 36.43upx;
		background-color: #f6e3cb;
		border-radius: 10px;
		border: solid 1px #f86c2f;
		font-size: 25.71upx;
		line-height: 16px;
		color: #f98515;
		text-align: center;
	}

	.btn-box2 {
		width: 112.86upx;
		height: 36.43upx;
		background-color: #cbf6ed;
		border-radius: 10px;
		border: solid 1px #13aa7d;
		font-size: 25.71upx;
		line-height: 16px;
		color: #23c69f;
		text-align: center;
		z-index: 999;
	}

	.weizhi {
		position: absolute;
		/* right: 0;
		 top: 6px; */
		left: 0;
		top: 4px;
	}

	.good-price {
		font-size: 24.29upx;
		line-height: 50upx;
		letter-spacing: 0px;
		color: #00a38a;
	}

	.item_1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;


	}

	.good-desc {
		width: calc(100% - 75px);
		padding-top: 3px;
		float: right;
		font-size: 28.57upx;
		line-height: 19px;
		min-height: 20px;
		overflow: hidden;
		color: #666666;
		/* text-overflow: ellipsis; */
		/* white-space: nowrap; */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.good-text {
		font-size: 28.57upx;
		letter-spacing: 0px;
		color: #666666;
		/* width: calc(100% - 75px); */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/* display: inline-block;
		    float: right; */
		flex: 1;
	}

	.good-sold {
		font-size: 24upx;
		margin-left: 16upx;
		color: gray;
	}

	.btnbox {
		color: #fff !important;
		width: 100%;
		margin: 0 auto;
		font-size: 14px;
		border-radius: 5.71upx;
		border: none !important;
	}

	.good-li {

		padding: 20rpx 30upx;
		background-color: #fff;
		border-radius: 21.43upx;

		border: 1px solid rgba(0, 0, 0, 0.1);






	}

	.item_data {
		display: flex;
		background: #fff;
		flex-direction: column;
		width: 100%;
		/* min-height: 159px; */
		min-height: 102px;
		padding-bottom: 10px;

	}

	.input-box {
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 70%;
	}

	.cardTitle {
		color: #fff;
		padding: 90upx 60upx;
		font-size: 40upx;
		font-weight: 300;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}

	.cardTitle::before {
		content: "";
		position: absolute;
		width: 60upx;
		height: 6upx;
		border-radius: 20upx;
		background-color: #fff;
		display: block;
		top: 60upx;
		left: 50upx;
		transform: skew(10deg, 0deg);
	}

	.cardTitle::after {
		content: "";
		position: absolute;
		width: 140upx;
		border-radius: 6upx;
		height: 24upx;
		background-color: #fff;
		display: block;
		bottom: 76upx;
		left: 90upx;
		transform: skew(10deg, 0deg);
		opacity: 0.1;
	}
	.cu-btn {
	    height: 90.71rpx;
	}
</style>
